<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { registerMap } from 'echarts/core';
import { init } from '../echarts-utils';
import china from './china.json';
import options from './map.ts';

const chart = ref<HTMLElement>();

function initChart() {
  const myChart = init(chart.value);
  registerMap('china', china);
  myChart.setOption({
    ...options,
    grid: {
      left: 0,
      right: 0,
      bottom: 0
    }
  });
}
onMounted(() => {
  initChart();
});
</script>

<template>
  <div class="map column fit">
    <div class="title">景区实时客流量</div>
    <div ref="chart" class="chart col"></div>
  </div>
</template>

<style scoped lang="scss">
.map {
  .title {
    padding-left: 30px;
    height: 30px;
    background: url(../images/map-title-bg.png) no-repeat;
    background-size: contain;
    color: #fff;
    font-size: 18px;
    line-height: 30px;
    list-style-position: 2px;
  }
}
</style>
